<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border:solid 1px black}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 400;

  const c2d = cvs.getContext("2d");

  // 设置字体大小和字体
  c2d.font = "42px 楷体";
  // 水平对齐方式
  // c2d.textAlign = "center";
  // 垂直对齐方式
  c2d.textBaseline = "bottom";

  // 填充文字
  // c2d.fillText("千锋H5", 200, 200);
  // 描边文字
  c2d.strokeText("千锋H5", 200, 200);

  // 获取文件的尺寸
  console.log( c2d.measureText("千锋H5").width );

  // 给文字添加下划线
  const w = c2d.measureText("千锋H5").width;
  c2d.moveTo(200,200);
  c2d.lineTo(200+w, 200);
  c2d.stroke();

  
</script>
</html>